<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 靠右的按钮 -->
      <pageTools>
        <template>
          <el-button
            type="primary"
            size="small"
            slot="after"
            @click="addPermission(1, '0')"
            >添加权限</el-button
          >
        </template>
      </pageTools>
      <!-- 表格 -->
      <el-table border :data="list" row-key="id">
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column
          prop="code"
          label="标识"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="description"
          label="描述"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="{ row }">
            <el-button
              v-if="row.type === 1"
              type="text"
              @click="addPermission(2, row.id)"
              >添加</el-button
            >
            <el-button type="text" @click="getPermissionDetail(row.id)"
              >编辑</el-button
            >
            <el-button type="text" @click="delPermission(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        :visible.sync="showPermission"
        :title="titlePermission"
        @close="cancelBtn"
      >
        <el-form
          ref="formDate"
          :model="formDate"
          :rules="rules"
          label-width="50px"
        >
          <el-form-item label="名称" prop="name"
            ><el-input v-model="formDate.name"
          /></el-form-item>
          <el-form-item label="标识" prop="code"
            ><el-input v-model="formDate.code"></el-input
          ></el-form-item>
          <el-form-item label="描述"
            ><el-input v-model="formDate.description"></el-input
          ></el-form-item>
          <el-form-item label="开启">
            <el-switch
              active-value="1"
              inactive-value="0"
              v-model="formDate.enVisible"
            ></el-switch
          ></el-form-item>
        </el-form>
        <el-row slot="footer" type="flex" justify="center">
          <el-col :span="6">
            <el-button size="small" @click="cancelBtn">取消</el-button>
            <el-button size="small" type="primary" @click="isOkBtn"
              >确定</el-button
            >
          </el-col>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getPermissionList,
  addPermission,
  updatePermission,
  delPermission,
  getPermissionDetail,
} from "@/api/permission";
import { tranTree } from "@/utils";
export default {
  data() {
    return {
      list: [],
      formDate: {
        name: "", // 名称
        code: "", // 标识
        description: "", // 描述
        type: "", // 类型 该类型 不需要显示 因为点击添加的时候已经知道类型了
        pid: "", // 因为做的是树 需要知道添加到哪个节点下了
        enVisible: "0", // 开启
      },
      rules: {
        name: { required: "true", message: "名称不能为空", trigger: "blur" },
        code: { required: "true", message: "标识不能为空", trigger: "blur" },
      },
      showPermission: false,
    };
  },
  computed: {
    titlePermission() {
      return this.formDate.id ? "编辑权限" : "新增权限";
    },
  },
  created() {
    this.getPermissionList();
  },
  methods: {
    //获取权限列表并渲染
    async getPermissionList() {
      // this.list = await getPermissionList();
      this.list = tranTree(await getPermissionList(), "0");
    },
    //删除权限
    async delPermission(id) {
      this.$confirm("是否删除该权限")
        .then(async () => {
          return await delPermission(id);
        })
        .then(() => {
          this.$message.success("删除权限成功");
          this.getPermissionList();
        });
    },
    addPermission(type, id) {
      this.formDate.type = type;
      this.formDate.pid = id;
      this.showPermission = true;
    },
    //获取权限信息
    async getPermissionDetail(id) {
      this.formDate = await getPermissionDetail(id);
      this.showPermission = true;
    },
    //上传(新增或者编辑)表单
    isOkBtn() {
      this.$refs.formDate
        .validate()
        .then(async () => {
          //如果有ID是编辑
          if (this.formDate.id) {
            return await updatePermission(this.formDate);
          }
          return await addPermission(this.formDate);
        })
        .then(() => {
          this.getPermissionList();
          this.$message.success("新增权限成功");
          this.showPermission = false;
        });
    },
    //取消上传(新增或者编辑)表单
    cancelBtn() {
      this.formDate = {};
      this.showPermission = false;
      this.$refs.formDate.resetFields();
    },
  },
};
</script>

<style>
</style>